<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>问答机器人</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <style>
        body{
            margin: 8px;
            font-family: 'Arial', sans-serif;
            text-align: center;
        }
        nav {
            background-color: #f2f2f2;
            padding: 10px 0;
            text-align: center;
            margin-bottom: 20px;
        }

        nav a {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            display: inline-block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        nav a:hover {
            background-color: #ddd;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
    <script>
        function getCookie(cookieName) {
            const strCookie = document.cookie
            const cookieList = strCookie.split(';')

            for(let i = 0; i < cookieList.length; i++) {
                const arr = cookieList[i].split('=')
                if (cookieName === arr[0].trim()) {
                    return arr[1]
                }
            }

            return ''
        }


        document.addEventListener('DOMContentLoaded', function() {
            // 群组点击事件
            document.getElementById('groupLink').addEventListener('click', function(event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('profileLink').addEventListener('click', function(event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('notificationLink').addEventListener('click', function(event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 校验用户是否已登录的函数
            function checkUserLoggedIn() {
                // 这里可以编写校验cookie中用户是否登录的逻辑，返回 true 或 false
                // 假设这里使用一个名为 isUserLoggedIn 的函数来校验
                return isUserLoggedIn();
            }

            // 这里是模拟的校验用户是否已登录的函数
            function isUserLoggedIn() {
                // 假设在 cookie 中有一个名为 'loggedIn' 的标识，表示用户是否已登录
                const username = getCookie('username')
                // alert(username)
                // 返回 true 表示已登录，返回 false 表示未登录
                return username !== '';

            }
        });
    </script>
</head>
<body>
<nav>
    <a href="/">首页</a>
    <div class="dropdown">
        <a class="dropbtn">群组</a>
        <div class="dropdown-content">
            <a href="/page/toGroupPage" id="groupLink">群组管理</a>
            <a href="#">群组聊天</a>
        </div>
    </div>
    <a href="/page/toAnswerPage">智能问答</a>
    <div class="dropdown">
        <a class="dropbtn">个人中心</a>
        <div class="dropdown-content">
            <a href="/page/toUserCenterPage" id="profileLink">个人资料</a>
            <a href="/page/toNotificationPage" id="notificationLink">通知</a>
            <a href="/page/Exit">登出</a>
        </div>
    </div>
</nav>
<div id="question-answer-container">
    <div id="container">

    </div>
</div>
<form id="question-form">
    <div class="input-container">
        <input type="text" id="question" placeholder="请输入问题"/>
        <button type="button" onclick="voiceput()">语音输入</button>
    </div>
    <button type="submit">提交</button>
</form>

<script>
    const listen = () => {
        // 创建语音识别对象
        const recognition = new webkitSpeechRecognition();
        // 语音设置成中文
        recognition.lang = "zh-CN";
        // 当识别到语音时触发事件
        recognition.addEventListener("result", (event) => {
            const { results } = event;
            console.log(results);
            const len = results.length;
            const { transcript } = results[len - 1][0];
            console.log(transcript)
            var x = document.getElementById("question");
            x.value = transcript;
        });
        return recognition;
    };
    // 开始识别
    function voiceput(){
        listen().start();
    }
    $("#question-form").submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        // 获取问题
        var question = $("#question").val();
        // 使用Ajax调用API接口
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8099/" + question,
            success: function(response) {
                // 获取答案
                console.log(response)
                var answer = response;
                $("#container").append("<div class='chat-receiver'><div>" +
                    "<img src='../resources/image/user.jpg'/></div>" +
                    "<div>用户</div>" +
                    "<div>" +
                    "<div class='chat-right_triangle'></div>" +
                    "<span>" + question + "</span>" +
                    "</div>" +
                    "</div>"
                   );
                $("#container").append("<div class='chat-sender'><div>" +
                    "<img src='../resources/image/doctor.jpg'/></div>" +
                    "<div>小医</div>" +
                    "<div> " +
                    "<div class='chat-left_triangle'></div>"+
                    "<span>&ensp;&ensp;&ensp;"+answer +":</span>" +
                    "</div>" +
                    "</div>");
            },
            error: function(error) {
                console.log("Error: ", error);
            }
        });
    });
</script>

</body>

</html>
<style>
    #question-form {
        width: 80%;
        border-radius: 10px;
        border: 1px solid #ccc;
        padding: 10px;
        margin:0 auto;
        position: fixed;
        bottom:35px;
        left: 10%;

    }
    #question-form input {
        width: 99%;
        padding: 5px;
        margin-bottom: 10px;
    }
    #question-form button {
        width: 100%;
        padding: 5px;
        margin: 5px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    #question-answer-container {
        background-color: #ebebeb;
        width: 100%;
        height: 550px;
        overflow: auto;
    }
    body{
        font-family: -apple-system;
        font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    }
    .chat-sender{
        clear:both;
        font-size: 80%;
    }
    .chat-sender div:nth-of-type(1){
        float: left;
    }
    .chat-sender div:nth-of-type(2){
        margin: 0 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: left;
    }
    .chat-sender div:nth-of-type(3){
        background-color: white;
        /*float: left;*/
        margin: 0 800px 10px 50px;
        padding: 10px 10px 10px 10px;
        border-radius:7px;
        text-indent: -12px;
        text-align: left;
        overflow:hidden;
    }
    .chat-receiver div:first-child img{
        width: 40px;
        height: 40px;
        /*border-radius: 10%;*/
    }
    .chat-sender div:first-child img{
        width: 40px;
        height: 40px;
        /*border-radius: 10%;*/
    }
    .chat-receiver{
        clear:both;
        font-size: 80%;
    }
    .chat-receiver div:nth-of-type(1){
        float: right;
    }
    .chat-receiver div:nth-of-type(2){
        margin: 0px 50px 2px 50px;
        padding: 0px;
        color: #848484;
        font-size: 70%;
        text-align: right;
    }
    .chat-receiver div:nth-of-type(3){
        /*float:right;*/
        background-color: #b2e281;
        margin: 0px 50px 10px 1320px;
        padding: 10px 10px 10px 10px;
        border-radius:7px;
        text-align: right;
        overflow:hidden;
    }

    .chat-left_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent white transparent transparent;
        position: relative;
        left: -22px;
        top: 3px;
    }
    .chat-right_triangle{
        height: 0px;
        width: 0px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent #b2e281;
        position: relative;
        right:-22px;
        top:3px;
    }

</style>

</html>